<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryList" :inline="true" label-width="68px">
        <el-form-item label="员工姓名">
          <el-input v-model="queryList.nickName" placeholder="请输入人员名称" clearable :style="{ width: '100%' }" filterable>
          </el-input>
        </el-form-item>
        <el-form-item label="员工编号">
          <el-input v-model="queryList.userName" placeholder="请输入员工编号" clearable style="width:100%" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" v-hasPermi="['basic:nccBasic:add']"
                     @click="addDialog('add')">新增</el-button>
          <el-button type="primary" icon="el-icon-search" v-hasPermi="['basic:nccBasic:query']"
                     @click="filterDire">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="directorList" border height="605px">
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="userName" label="员工工号" align="center"></el-table-column>
        <el-table-column prop="nickName" label="员工姓名" align="center"></el-table-column>
        <el-table-column prop="phonenumber" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" align="center"></el-table-column>
        <el-table-column key="remark" label="备注" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                       @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="addDialog('edit', scope.row)"
                       v-hasPermi="['basic:nccBasic:edit']" :disabled="scope.row.enablestate === '1'">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete"
                       @click="deleteBtn(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="queryList.pageNum" :page-size="queryList.pageSize"
                     :page-sizes="[10, 20, 50, 100]" :total="total">
      </el-pagination>
    </el-card>
    <seatingAreaAdd ref="seatingAreaAdd" :visible.sync="visible" @addSuccess="addSuccess" />
  </div>
</template>

<script>
// 引入下拉框方法组件
import seatingAreaAdd from "@/components/BasicInformation/seatingArea-add.vue"
import {
  changeUserStatus,//修改状态
  listUser,
  deleteByUserId,//删除
} from '@/api/system/user.js'
export default {
  components: {
    seatingAreaAdd
  },
  data() {
    return {
      queryList: {
        name: '', //员工名称
        code: '', //员工编号
      },
      directorList: [], //el-table数据
      total: 0,
      visible: false,
    };
  },
  created() {
    this.getDirectoryList();
  },
  methods: {
    clearAll() {
      this.queryList = {
        name: "",
        code:"",
      };
      this.getDirectoryList();
    },
    getDirectoryList() {
      listUser(this.queryList).then(response => {
          this.directorList = response.rows;
          this.total = response.total;
        }
      );
    },
    filterDire() {
      this.getDirectoryList()
    },
    //删除用户
    deleteBtn(row){
      this.$modal.confirm('确认要删除"'  + row.userName + '"用户吗？').then(function () {
        return deleteByUserId({userId:row.userId});
      }).then((res) => {
        this.$modal.msgSuccess(res.msg);
      }).catch(function (err) {
        this.$modal.msgError(err.msg || '删除失败');
      })
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function () {
        return changeUserStatus(row.userId, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    //新增/修改后刷新列表
    addSuccess() {
      this.getDirectoryList();
    },
    addDialog(type, row) {
      this.visible = true;
      this.$refs.seatingAreaAdd.openDialog(type, row);
    },
    handleSizeChange(newsize) {
      this.queryList.pageNum = 1
      this.queryList.pageSize = newsize
      this.getDirectoryList()
    },
    handleCurrentChange(newpage) {
      this.queryList.pageNum = newpage
      this.getDirectoryList()
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
